<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 150px;
        }
    </style>
</head>
<body>
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <img src="./img/bright.jpg" alt="">
    <!-- <img src="./img/dark.jpg" alt=""> -->


    <script>
        /* 
        需求：当鼠标移入到图片上，如果图片是亮着的，切换成暗的图片；如果图片是暗着的，切换成亮的图片；、
        */

        // 1、获取元素
        var oImg = document.querySelectorAll('img');

        // var tag = true;

        // 2、加事件  -- 鼠标移入
        for(var i=0;i<oImg.length;i++){
            // 自定义属性 --给每一个img标签添加状态 ---状态独立
            oImg[i].tag = true;
            oImg[i].onmouseover = function(){
                
                // 3、做什么事 --如果图片是亮着的，切换成暗的图片；如果图片是暗着的，切换成亮的图片；
                if(this.tag == true){
                    this.src = './img/dark.jpg';
                    this.tag = false;
                }else{
                    this.src = './img/bright.jpg';
                    this.tag = true;
                }
            }
        }
    </script>
</body>
</html>